<script setup lang="ts">
import type { Room } from './interface';

import { computed, ref } from 'vue';

import { MdiDown } from '@vben/icons';

import {
  Button,
  Checkbox,
  CheckboxGroup,
  Divider,
  Modal,
  RangePicker,
} from 'ant-design-vue';
import dayjs from 'dayjs';

const props = defineProps({
  formData: {
    type: Object,
    default: () => ({}),
  },
  roomList: {
    type: Array as () => Room[],
    default: () => [],
  },
});
const emit = defineEmits(['checkbox', 'changleDate', 'selectRoom']);

// 房型选择弹窗
const open = ref(false);
// 全选房型
const allRoomSelect = ref(false);
// 选择的房型数据
const roomSelect = ref<any>([]);

// 通过计算属性拿到formData.selectDate中两个日期一共选中多少天
const daysCount = computed(() => {
  const [start, end] = props.formData.selectDate;
  if (start && end) {
    return dayjs(end).diff(dayjs(start), 'day') + 1;
  }
  return 0;
});

// 计算十天前的日期
const tenDaysAgo = dayjs().subtract(14, 'day').startOf('day');

// 禁用超过十天前的日期
const disabledDate = (current: dayjs.Dayjs) => {
  return current && current.isBefore(tenDaysAgo);
};

// 多选事件
const handleCheckbox = (e: any, key: string) => {
  const bool = e.target.checked;
  emit('checkbox', bool, key);
};

// 日期选择事件
const handleDate = (e: any) => {
  emit('changleDate', e);
};

// 房型全选事件
const handleRoomAll = (e: any) => {
  roomSelect.value = e.target.checked
    ? props.roomList?.map((item) => item.id)
    : [];
};

// 点击确定按钮事件
const handleOk = () => {
  open.value = false;
  emit('selectRoom', roomSelect.value);
};
</script>

<template>
  <div>
    <!-- 头部内容 -->
    <div class="px-4 pt-2">
      <div class="text-xl font-bold">日历</div>
      <div class="flex flex-wrap items-center py-2">
        <Button
          class="mr-2 h-auto w-auto rounded-sm px-3 py-1"
          type="primary"
          @click="open = true"
        >
          <div class="flex items-center">
            快速选择房型 <MdiDown class="ml-1" />
          </div>
        </Button>
        <div class="mr-2">
          <RangePicker
            :allow-clear="false"
            :disabled-date="disabledDate"
            :value="formData.selectDate"
            class="rounded-sm"
            @change="handleDate"
          />
        </div>
        <div class="mr-3">已选{{ daysCount }}天</div>
        <!-- 显示设置 -->
        <div class="mr-2 flex items-center rounded-sm border px-1 py-1 pl-3">
          <span class="mr-3 opacity-70">显示</span>
          <Checkbox
            :checked="formData.showPrice"
            @change="handleCheckbox($event, 'showPrice')"
          >
            <span class="text">房价</span>
          </Checkbox>
          <Checkbox
            :checked="formData.showRoomInfo"
            @change="handleCheckbox($event, 'showRoomInfo')"
          >
            <span class="text">房量房态</span>
          </Checkbox>
        </div>
      </div>
    </div>
    <Divider class="m-0 mt-1" />
    <!-- 快速选择房型弹窗 -->
    <Modal v-model:open="open" title="选择房型" width="800px" @ok="handleOk">
      <div class="card-box mt-3 rounded-md">
        <div class="flex min-h-[50px] items-center px-4 py-3">
          <Checkbox v-model:checked="allRoomSelect" @change="handleRoomAll">
            <div class="text flex items-center">
              全选
              <p v-if="roomSelect.length > 0" class="ml-2">
                (已选择<span class="text-primary pl-1">
                  {{ roomSelect.length }}
                </span>
                个房型)
              </p>
            </div>
          </Checkbox>
        </div>
        <div class="max-h-[360px] overflow-auto px-4">
          <CheckboxGroup
            v-model:value="roomSelect"
            class="flex flex-wrap"
            name="roomSelect"
          >
            <div v-for="item in roomList" :key="item.id" class="w-full">
              <Divider class="m-0" />
              <Checkbox
                :value="item.id"
                class="mr-2 flex min-h-[50px] items-center py-3"
              >
                <span class="text">{{ item.nameZh }}</span>
              </Checkbox>
            </div>
          </CheckboxGroup>
        </div>
      </div>
    </Modal>
  </div>
</template>

<style scoped lang="scss">
.text {
  color: hsl(var(--card-foreground));
}
</style>
